<%--
  Created by IntelliJ IDEA.
  User: zxw
  Date: 2021/3/11
  Time: 20:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户信息</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script src="WEB-INF/js/jq.js"></script>
</head>
<!-- L2Dwidget.js L2D网页动画人物 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
            "jsonPath": "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
            "scale": 1,
            "hHeadPos": 0.5,
            "vHeadPos": 0.618
        },
        "display": {"position": "right", "width": 250, "height": 300, "hOffset": 0, "vOffset": 0},
        "mobile": {"show": true, "scale": 0.5},
        "react": {"opacityDefault": 0.7, "opacityOnHover": 0.2}
    });
</script>
<body>
<div style="margin: 0 43% ;color: #4E5465;font-size: 50px ">员工信息</div>
<%--用户权限/新增用户form表单--%>
<form class="layui-form" action="" lay-filter="formData" id="formData" style="display: none">

    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <input type="text" name="id" style="display: none" lay-verify="title" id="id" autocomplete="off" readonly="readonly" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">员工账号</label>
        <div class="layui-input-inline">
            <input type="text" name="username" id="name" onblur="regUser()"  lay-verify="required" autocomplete="off" readonly="readonly" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-inline">
            <input type="text" name="email"  onblur="regEmail()"  lay-verify="required|email" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" name="phone"   onblur="regPhone(this)" lay-verify="required|phone" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证号</label>
        <div class="layui-input-inline">
            <input type="text" name="card" onblur="regCard()"   lay-verify="required|identity" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-inline">
            <input type="text" name="address" onblur="regAddress()"  lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked="">
            <div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i>
                <div>男</div>
            </div>
            <input type="radio" name="sex" value="女" title="女">
            <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
                <div>女</div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">所在部门</label>
        <div class="layui-input-inline">
            <select name="deptid" lay-filter="deptid" id="deptid">
                <option value=""  disabled="disabled" selected="selected">选择部门</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <select name="status" lay-filter="aihao">
                <option value="0" selected="">在职</option>
                <option value="1" >离职</option>
                <option value="2">停职</option>

            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门职位</label>
        <div class="layui-input-inline">
            <select name="rid" lay-filter="rid" id="rid">
                <option value=""  disabled="disabled" selected="selected">选择职位</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
        </div>
    </div>
</form>

<div class="layui-btn-group demoTable">
    <button class="layui-btn" data-type="getCheckData">新增一个用户</button>
</div>
<div class="layui-row  demoTable">
    <form class="layui-form" action="" lay-filter="example">
        <div class="layui-col-xs3">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名查询</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" id="demoReload1" lay-verify="required" placeholder="姓名查询" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs4">
            <div class="layui-inline">
                <label class="layui-form-label">职位查询</label>
                <div class="layui-input-inline">
                    <select name="rid" lay-verify="required" lay-search="" lay-filter="rid" id="demoReload2">
                        <option value="">职位查询</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-xs4">
            <div class="layui-inline">
                <label class="layui-form-label">部门查询</label>
                <div class="layui-input-inline">
                    <select name="deptid" lay-verify="required" lay-filter="deptid" lay-search="" id="demoReload3">
                        <option value="">部门查询</option>
                    </select>
                </div>
            </div>
        </div>
        </form>
        <div class="layui-col-xs1">
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
    </div>


<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="resetting">重置密码</a>
</script>

<script type="text/html" id="state">
    {{#  if(d.status ==0){ }}
    <button class="layui-btn layui-btn-sm layui-btn-danger">在职</button>
    {{#  } else if(d.status ==1){ }}
    <button class="layui-btn layui-btn-sm">离职</button>
    {{#  } else{ }}
    <button class="layui-btn layui-btn-sm">停职</button>
    {{#  } { }}
</script>





<script>
    // var phoneVerify=false;
    // function regPhone(phone) {
    //
    //     var pattern = /0?(13|14|15|18|17)[0-9]{9}/;
    //     if(!pattern.test(phone.value)){
    //         phoneVerify=true;
    //     }
    //
    // }

    layui.use(['table', 'jquery', 'form'], function () {
        var $ = layui.jquery;
        var table = layui.table
            , form = layui.form;
        $(function () {
            showTable();
            showSelect();
        });

        // 数据表格
        function showTable() {
            table.render({
                elem: '#test'
                , url: '${pageContext.request.contextPath}/user/userTab'
                , cellMinWidth: 80
                , defaultToolbar: ['filter', 'exports', 'print']
                , cols: [[
                    {field: 'id', title: '用户ID', unresize: true, sort: true}
                    , {field: 'username', title: '用户名', templet: '#usernameTpl'}
                    , {field: 'email', title: '邮箱'}
                    , {field: 'phone', title: '电话'}
                    , {field: 'rid', title: '角色id',hide:true}
                    , {field: 'deptid', title: '部门id',hide:true}
                    , {field: 'card', title: '身份证号'}
                    , {field: 'sex', title: '性别'}
                    , {field: 'address', title: '地址'}
                    , {field: 'dept', title: '部门', sort: true}
                    , {field: 'rname', title: '职位'}
                    , {field: 'entrydate', title: '入职时间'}
                    , {field: 'status', title: '在职/离职',
                        templet: function(d){
                            var sta;
                            if(d.status==1){
                                sta='<button class="layui-btn layui-btn-sm layui-btn-danger">离职</button>'
                            }else if(d.status==0){
                                sta='<button class="layui-btn layui-btn-sm">在职</button>'
                            }else {
                                sta='<button class="layui-btn layui-btn-sm layui-btn-danger">停职</button>'
                            }
                                return sta
                        }
                        }
                    , {fixed: 'right', title: '操作',  width: 150,toolbar: '#barDemo'}
                ]]
                , id: 'testReload'
                ,page:true
                ,limit:10
                ,limits:[10,20,30]
            });
        }

        // 搜索事件
        var $ = layui.$, active = {
            // 搜索框
            reload: function () {
                var demoReload1 = $('#demoReload1').val();
                var demoReload2 = $('#demoReload2').val();
                var demoReload3 = $('#demoReload3').val();
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        username: demoReload1,
                        rid:demoReload2,
                        deptid:demoReload3
                    }
                }, 'data');
            },
            // 新增用户
            getCheckData: function () {
                $("#formData")[0].reset();
                $("#name").removeAttr("readonly");
                layer.open({
                    type: 1
                    , title: '添加新的员工'
                    , offset: 'auto'
                    , area: ['30%', '80%']
                    , content: $('#formData')
                    , anim: 1

                });
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        // 修改删除事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                form.val('formData',data);
                console.log(data);
                layer.open({
                    type: 1
                    , title: '修改员工信息'
                    , offset: 'auto'
                    , area: ['30%', '80%']
                    , content: $('#formData')
                    , anim: 1
                });
            }else if(obj.event === 'resetting' ){
                $.ajax({
                    type: 'post',
                    url: "${pageContext.request.contextPath}/user/resetting",
                    data: {id:data.id},
                    dataType: 'json',
                    success: function (result) {
                        if (result.code == 1) {
                            layer.msg(result.msg, {icon: 1});
                            showTable()
                        } else {
                            layer.msg(result.msg, {icon: 5})
                        }
                        layer.closeAll()
                    }
                });
            }
        });

        // 表单提交监听
        form.on('submit(demo1)', function (data) {
            $('#formData')[0].reset();
            $.ajax({
                type: 'post',
                url: "${pageContext.request.contextPath}/user/updateUser",
                data:data.field,
                dataType:'json',
                success: function (result) {
                    if (result.code == 1) {
                        layer.msg(result.msg, {icon: 1});
                        showTable()
                    } else {
                        layer.msg(result.msg, {icon: 5})
                    }
                    layer.closeAll()
                }
            });
            return false;
        });

        // 下拉框加载
        function showSelect() {
            // ajax请求发送数据
            $.ajax({
                // 请求类型
                type: "get",
                // 请求路径
                url: '${pageContext.request.contextPath}/dept/query',
                // 成功后执行函数
                success: function (result) {
                    // 循环添加<option>并赋值
                    for (var i = 0; i < result.data.length; i++) {
                        $("#deptid").append(
                            $("<option>").attr("value", result.data[i]['deptid']).text(result.data[i]['dept'])
                        );
                        $("#demoReload3").append(
                            $("<option>").attr("value", result.data[i]['deptid']).text(result.data[i]['dept'])
                        )
                    }

                    //更新渲染下拉框数据
                    form.render('select', 'formData');
                    form.render('select', 'example');
                }
            });
            $.ajax({
                // 请求类型
                type: "get",
                // 请求路径
                url: '${pageContext.request.contextPath}/role/getAllRole',
                // 成功后执行函数
                success: function (result) {
                    // 循环添加<option>并赋值
                    for (var i = 0; i < result.data.length; i++) {
                        $("#rid").append(
                            $("<option>").attr("value", result.data[i]['rid']).text(result.data[i]['rname'])
                        );
                        $("#demoReload2").append(
                            $("<option>").attr("value", result.data[i]['rid']).text(result.data[i]['rname'])
                        )
                    }
                    //更新渲染下拉框数据
                    form.render('select', 'formData');
                    form.render('select', 'example');
                }
            });
        }
    });
</script>

</body>
</html>
